// Home页面布局尺寸变量
$home-aside-width: 250px;           // 侧边栏宽度
$home-header-height: 60px;          // 头部高度
$home-footer-height: 50px;          // 底部高度
$home-border-width: 1px;            // 边框宽度

// Home页面字体大小变量
$home-font-size-small: 12px;        // 小字体
$home-font-size-normal: 14px;       // 普通字体
$home-font-size-medium: 16px;       // 中等字体
$home-font-size-large: 18px;        // 大字体

// Login页面主要颜色定义 - 原始蓝紫色方案
$login-color-primary: #667eea;        // 登录页主色调（蓝紫色）
$login-color-secondary: #764ba2;      // 登录页次要色（紫色）
$login-color-primary-hover: #5a6fd8;  // 主色调hover状态
$login-color-secondary-hover: #6a4190; // 次要色hover状态
$login-color-text: #374151;           // 登录页文本颜色
$login-color-text-placeholder: #9ca3af; // 占位符文本颜色
$login-color-border: #d1d5db;         // 边框颜色
$login-color-border-focus: #667eea;   // 聚焦状态边框颜色
$login-color-shadow: rgba(102, 126, 234, 0.2); // 登录页阴影颜色（基于主色调的半透明）

// 登录页面其他颜色变量
$login-overlay-bg: rgba(102, 126, 234, 0.6); // 遮罩层背景色（主色调半透明）
$login-overlay-bg-secondary: rgba(118, 75, 162, 0.6); // 遮罩层次要背景色
$login-card-bg: rgba(255, 255, 255, 0.95); // 登录卡片背景色
$login-card-shadow: rgba(0, 0, 0, 0.1); // 登录卡片阴影
$login-card-border: rgba(255, 255, 255, 0.2); // 登录卡片边框
$login-input-shadow: rgba(0, 0, 0, 0.1); // 输入框阴影
$login-input-shadow-focus: rgba(102, 126, 234, 0.15); // 输入框聚焦阴影
$login-input-shadow-focus-ring: rgba(102, 126, 234, 0.1); // 输入框聚焦环
$login-button-shadow: rgba(102, 126, 234, 0.25); // 按钮阴影
$login-button-shadow-hover: rgba(102, 126, 234, 0.35); // 按钮hover阴影
$login-decoration-shadow: rgba(102, 126, 234, 0.3); // 装饰元素阴影
$login-decoration-bg: rgba(255, 255, 255, 0.1); // 装饰元素背景

// 全局主色调变量定义
$primary-color: #607AFB;                    // 主色调（蓝紫色）
$primary-color-light: #7B8EFC;              // 主色调浅色
$primary-color-dark: #4F6BF5;               // 主色调深色
$primary-color-hover: #5A6FD8;              // 主色调hover状态
$primary-color-active: #4A5FC7;             // 主色调active状态
$primary-color-disabled: #C4D1FF;           // 主色调禁用状态

// 主色调透明度变体
$primary-color-alpha-10: rgba(96, 122, 251, 0.1);   // 10% 透明度
$primary-color-alpha-20: rgba(96, 122, 251, 0.2);   // 20% 透明度
$primary-color-alpha-30: rgba(96, 122, 251, 0.3);   // 30% 透明度
$primary-color-alpha-70: rgba(96, 122, 251, 0.7);   // 30% 透明度

// 第二主色调变量定义
$secondary-color: #764ba2;                   // 第二主色调（紫色）
$secondary-color-light: #8B5FB8;             // 第二主色调浅色
$secondary-color-dark: #6A4190;              // 第二主色调深色
$secondary-color-hover: #6A4190;             // 第二主色调hover状态
$secondary-color-active: #5E3A7F;            // 第二主色调active状态
$secondary-color-disabled: #D4C4E8;          // 第二主色调禁用状态

// 第二主色调透明度变体
$secondary-color-alpha-10: rgba(118, 75, 162, 0.1);   // 10% 透明度
$secondary-color-alpha-20: rgba(118, 75, 162, 0.2);   // 20% 透明度
$secondary-color-alpha-30: rgba(118, 75, 162, 0.3);   // 30% 透明度

// 成功色调
$success-color: #67C23A;                    // 成功色
$success-color-hover: #85CE61;              // 成功色hover
$success-color-active: #529B2E;             // 成功色active

// 警告色调
$warning-color: #E6A23C;                    // 警告色
$warning-color-hover: #EEBC69;              // 警告色hover
$warning-color-active: #CF9236;             // 警告色active

// 危险色调
$danger-color: #F56C6C;                     // 危险色
$danger-color-hover: #F78989;               // 危险色hover
$danger-color-active: #DD6161;              // 危险色active

// 信息色调
$info-color: #909399;                       // 信息色
$info-color-hover: #A6A9AD;                 // 信息色hover
$info-color-active: #82848A;                // 信息色active

// 通用文本颜色变量
$text-color-primary: #303133;               // 主要文本颜色
$text-color-primary-dark: #e5e7eb;          // 深色模式主要文本颜色
$text-color-secondary: #606266;             // 次要文本颜色
$text-color-secondary-dark: #9ca3af;        // 深色模式次要文本颜色
$text-color-placeholder: #c0c4cc;           // 占位符文本颜色
$text-color-muted: #9ca3af;                 // 弱化文本颜色
$text-color-muted-dark: #6b7280;            // 深色模式弱化文本颜色
$text-color-disabled: #c0c4cc;              // 禁用文本颜色
$text-color-disabled-dark: #4b5563;         // 深色模式禁用文本颜色

// 通用背景颜色变量
$bg-color-white: #ffffff;                   // 白色背景
$bg-color-light: #f8fafc;                   // 浅色背景
$bg-color-light-dark: #111827;              // 深色模式浅色背景
$bg-color-gray: #f5f6f8;                    // 灰色背景
$bg-color-gray-dark: #0f1323;               // 深色模式灰色背景
$bg-color-card: #ffffff;                    // 卡片背景
$bg-color-card-dark: #1f2937;               // 深色模式卡片背景
$bg-color-sidebar: #ffffff;                 // 侧边栏背景
$bg-color-sidebar-dark: #1e1b2e;            // 深色模式侧边栏背景
$bg-color-header: #ffffff;                  // 头部背景
$bg-color-header-dark: #1e1b2e;             // 深色模式头部背景

// 通用边框颜色变量
$border-color-light: #e4e7ed;               // 浅色边框
$border-color-light-dark: #374151;          // 深色模式浅色边框
$border-color-base: #e5e7eb;                // 基础边框颜色
$border-color-base-dark: #374151;           // 深色模式基础边框颜色
$border-color-lighter: #f0f0f0;             // 更浅的边框颜色
$border-color-lighter-dark: #2d3748;        // 深色模式更浅的边框颜色

// 通用悬停和激活状态颜色
$hover-bg-light: #f5f7fa;                   // 浅色悬停背景
$hover-bg-light-dark: #374151;              // 深色模式浅色悬停背景
$active-bg-primary: rgba(96, 122, 251, 0.1); // 主色调激活背景
$active-bg-primary-dark: rgba(96, 122, 251, 0.2); // 深色模式主色调激活背景

// 通用阴影变量
$shadow-light: 0 2px 8px rgba(0, 0, 0, 0.06);     // 浅色阴影
$shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);    // 中等阴影
$shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.15);    // 重阴影
$shadow-primary: 0 4px 20px rgba(96, 122, 251, 0.3); // 主色调阴影

// 特殊颜色变量
$color-success-alt: #10b981;                // 替代成功色（绿色）
$color-warning-alt: #f59e0b;                // 替代警告色（橙色）
$color-danger-alt: #ef4444;                 // 替代危险色（红色）
$color-notification: #f56565;               // 通知颜色（红色）

// 渐变色变量
$gradient-primary: linear-gradient(135deg, #607AFB 0%, #8b5cf6 100%); // 主色调渐变
$gradient-secondary: linear-gradient(135deg, #764ba2 0%, #667eea 100%); // 次要色调渐变

// 深色模式相关变量
$dark-bg-color-base: #111827;               // 深色模式基础背景色
$dark-bg-color-light: #1f2937;              // 深色模式浅色背景
$dark-hover-bg-light: #374151;              // 深色模式浅色悬停背景
$dark-border-color-base: #374151;           // 深色模式基础边框颜色
$dark-text-color-primary: #e5e7eb;          // 深色模式主要文本颜色
$dark-text-color-secondary: #9ca3af;        // 深色模式次要文本颜色
$dark-text-color-disabled: #4b5563;         // 深色模式禁用文本颜色
$dark-text-color-muted: #6b7280;            // 深色模式弱化文本颜色

// CSS 变量形式的主题色（支持动态修改）
// 在组件中使用 var(--primary-color) 来实现动态主题切换
:root {
  --primary-color: #{$primary-color};
  --primary-color-light: #{$primary-color-light};
  --primary-color-dark: #{$primary-color-dark};
  --primary-color-hover: #{$primary-color-hover};
  --primary-color-active: #{$primary-color-active};
  --primary-color-disabled: #{$primary-color-disabled};
  --primary-color-alpha-10: #{$primary-color-alpha-10};
  --primary-color-alpha-20: #{$primary-color-alpha-20};
  --primary-color-alpha-30: #{$primary-color-alpha-30};

  // 文本颜色变量
  --text-color-primary: #{$text-color-primary};
  --text-color-primary-dark: #{$text-color-primary-dark};
  --text-color-secondary: #{$text-color-secondary};
  --text-color-secondary-dark: #{$text-color-secondary-dark};

  // 背景颜色变量
  --bg-color-card: #{$bg-color-card};
  --bg-color-card-dark: #{$bg-color-card-dark};
  --bg-color-sidebar-dark: #{$bg-color-sidebar-dark};

  // 深色模式背景变量
  --dark-bg-color-light: #{$dark-bg-color-light};
}
